<template>
    <div class="box">
        <div class="search">
            <van-icon name="arrow-left" color="#999999" size="18px" @click="handleJump"/>
            <div class="input">
                <van-icon name="search" size="20px"/>
                <input type="text" v-model="searchText" @keyup.enter="search" placeholder="满66包邮，输入名称查询">
                <!-- <input type="text" v-model="searchText"  placeholder="满66包邮，输入名称查询"> -->
            </div>
            <span @click="search">搜索</span>
            <!-- <span >搜索</span> -->
        </div>
        <div class="cont" ref="warpper" v-if="isshow">
            <div class="box">
                <div class="goods"
                    v-for="(item,index) in searchList" 
                    :key="index" 
                >
                    <div class="list" >
                        <div class="img">
                            <img :src="item.original_img" alt="">
                        </div>
                        <div class="right">
                            <h2 > <i>OTC</i> {{item.goods_name}}</h2>
                            <p>￥{{item.goods_price}}<span>￥{{item.ori_price}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from '../utils/request'
    import BScroll from '@better-scroll/core' //【1】安装依赖
    import Pullup from '@better-scroll/pull-up'
    BScroll.use(Pullup)
    let p = 1; //页码
    export default {
        data() {
            return {
                isshow:false,
                searchText: "",
                list: [],
                searchList: []
            }
        },
        created() {
            let dsq = setInterval(()=>{
                if(p<40){
                    p++
                    // console.log(p);
                    let url = `/hehe/Mobile/SearchGoods/newSearch.html?keywords=%E8%8D%AF&type=1
                    &page=${p}&category=&other=&startPrice=&endPrice=&price=&brand=&store=&server=&tagType=&sortType=`
                    request.get(url).then(res=>{
                        let rows = res.data.data.rows
                        // rows.forEach(item=>{ //拿数据追加到list中
                        //         this.list.push(item)
                        //         // console.log(item);
                        // })
                        this.list = [  //拿数据追加到list中
                            ...this.list,//旧数据
                            ...rows // 新数据
                        ]
                    })
                }else(
                    clearInterval(dsq)
                )
                this.$nextTick(()=>{
                    this.searchList = this.list;
                    // console.log(this.list);
                })
            },100)
            console.log(this.searchList);
        },
        methods: {
            search() {
                // console.log(111);
                // console.log(this.searchList);
                this.searchList = this.list.filter((text) => {
                    return text.goods_name.match(this.searchText);
                })
                this.isshow = true
            },
            handleJump(){
                this.$router.go(-1)
            }
        },
    }
</script>

<style src="../assets/css/search.css"  scoped></style>